<!-- src/components/ItemList.vue -->
<template>
  <div class="item-list">
    <div v-for="item in filteredItems" :key="item.id" class="item">
      <div v-html="highlightText(item.name)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, computed } from 'vue';

const props = defineProps<{
  searchQuery: string;
}>();

console.log('Initial searchQuery:', props.searchQuery);

const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
  { id: 4, name: 'Date' },
  { id: 5, name: 'Elderberry' },
  { id: 6, name: '贵阳人民医院'},
  { id: 7, name: '北京人民医院'},
  { id: 8, name: '河南人民医院'},
]);

const filteredItems = computed(() => {
  if (!props.searchQuery) {
    return [];
  }
  return items.value.filter(item =>
    item.name.toLowerCase().includes(props.searchQuery.toLowerCase())
  );
});

const highlightText = (text: string) => {
  if (!props.searchQuery) {
    return text;
  }
  const regex = new RegExp(`(${props.searchQuery})`, 'gi');
  return text.replace(regex, '<span class="highlight">$1</span>');
};
</script>

<style scoped lang="scss">
.item-list {
  position: absolute;
  margin-top: 70px;
  left: 167px;
  background-color: #fff;
  z-index: 1000;
  width: 1200px;
  border: 1px solid #ccc; /* 添加边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 更深的阴影 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ccc; /* 添加底部边框 */
}

.item:last-child {
  border-bottom: none; /* 最后一个 item 不需要底部边框 */
}

.highlight {
  background-color: yellow; /* 高亮背景颜色 */
  font-weight: bold; /* 加粗高亮文本 */
}
</style>
